<script setup>

    import {ref,reactive} from 'vue'
    import axios from 'axios'
    import { ElMessage  } from 'element-plus';
    import { useRouter } from 'vue-router'
    import { userStore } from '@/store/user.js'
    const refRuleForm = ref(null)
    const rules = reactive({})

    const ruleForm = reactive({
        account: '',
        password: '',
        checkPass: '',
        email: '',
        validCode: ''
    })

    const sendEmail = ()=>{
        //前端校验跳过 不要为难自己
        axios.get(`/user/sendEmail?address=${ruleForm.email}`).then(resp=>{
            ElMessage.success(resp.data);
        });
    }

    const router = useRouter();
    const userItemStore = userStore();

    const submitForm = ()=>{

        //拿到数据 注册   注册成功 默认登录
        //不进行校验
        axios.post('/user/register',ruleForm).then(resp=>{
            //返回结果
            console.log(resp.data);
            //存储 token 和用户信息 浏览器的本地存储
            //拿到 拿到 服务器返回token 信息
            localStorage.setItem('token',resp.headers.authorization);
            //user 对象转成json字符串
            localStorage.setItem('user',JSON.stringify(resp.data));
            //提示框
            ElMessage.success("登录成功....")

            //pinia 存储 用户信息
            userItemStore.updateUser(resp.data)
            userItemStore.updateLoginStatus(true)
            //跳转
            router.push("/")
        })
    }
</script>

<template>
    <div class="login-container">
        <el-card class="register-content">
            <span class="register-title">蜗牛书城：用户注册</span>
            <!-- :rules="rules" 设定校验规则 -->
            <el-form ref="refRuleForm" :model="ruleForm"
                     status-icon size="small" :rules="rules" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="账号名" prop="account">
                    <el-input v-model="ruleForm.account"
                              placeholder="请输入用户账号" style="width: 250px;"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password"
                              placeholder="请输入用户密码"
                              style="width: 250px;"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass"
                              placeholder="请输入确认密码"
                              style="width: 250px;"></el-input>
                </el-form-item>

                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="ruleForm.nickname"
                              placeholder="请输入用户昵称" style="width: 250px;"></el-input>
                </el-form-item>

                <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="ruleForm.realName"
                              placeholder="请输入真实姓名" style="width: 250px;"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="mobile">
                    <el-input type="mobile" v-model="ruleForm.mobile"
                              placeholder="请输入正确的手机号"
                              style="width: 250px;"></el-input>
                </el-form-item>
                <!-- 查看ElementPlus的Form组件 -->
                <el-form-item prop="email" label="邮箱地址">
                    <el-input v-model="ruleForm.email" placeholder="请输入邮箱地址"
                              style="width: 200px; float: left; margin-right: 5px;"></el-input>
                    <el-button type="primary" @click="sendEmail()">发送验证码</el-button>
                </el-form-item>

                <el-form-item prop="validCode" label="验证码">
                    <el-input v-model="ruleForm.validCode"
                              placeholder="请输入验证码" style="width: 140px" minlength="4"
                              maxlength="4">
                    </el-input>
                </el-form-item>

                <div class="register-submit">
                    <el-button type="success" @click="submitForm()" style="width: 150px;"
                               icon="el-icon-user-solid">提交
                    </el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>


<style scoped>
    .login-container {
        position: fixed;
        height: 100%;
        width: 100%;
        left: 0;
        background-image: linear-gradient(0, rgb(68, 68, 235), lightblue);
        display: flex;
        /* 水平居中对齐 */
        justify-content: center;
        /* 垂直居中对齐 */
        height: 100%;
    }

    .register-content {
        margin: 10px auto;
        border-radius: 5px;
        padding: 10px;
        width: 480px;
        height: 560px;
    }

    .register-title {
        font-size: 20px;
    }

    .register-submit {
        text-align: center;
    }

</style>